<template>
  <view class="page flex-col">
    <view class="box_2 flex-col">
      <view class="block_1 flex-col">
        <view class="text-wrapper_6 flex-row justify-between">
          <text class="text_4 tab" v-for="(item,index) in options" :key="index" :class="{'tab-active':activeIndex==index}" @click="handleTab(item,index)">
            {{ item.label }}
          </text>
<!--          <text class="text_4">待完成</text>-->
<!--          <text class="text_5">已完成</text>-->
        </view>
        <view class="block_7 flex-row">
<!--          <view class="block_2 flex-col"></view>-->
        </view>
      </view>
    </view>
    <view class="list_3 flex-col">
      <scroll-view scroll-y="true" @scrolltolower="loadMoreData" style="width: 100%;height: 100%;">
        <view
            class="list-items_1 flex-col"
            v-for="(item, index) in loopData0"
            :key="index"
            @click="gotoWorkDetail(item)"
        >
            <view class="block_3 flex-col">
              <image :src="item.experiment.thumb_url"></image>
            </view>
            <view class="box_9 flex-row">
              <image
                  class="image_7"
                  referrerpolicy="no-referrer"
                  :src="activeIndex==0?
                  './imgs/notFinish.png':'./imgs/finish.png'"
              />
              <text class="text_6">{{item.name}}</text>
            </view>
            <view class="block_5 flex-col"></view>
            <view class="box_10 flex-row justify-between">
              <view class="image-text_13 flex-row justify-between">
                <image
                    class="thumbnail_5"
                    referrerpolicy="no-referrer"
                    src="./imgs/ava.png"
                />
                <text class="text-group_1">良益科技</text>
              </view>

              <view class="thumbnail_14"></view>
              <text class="text_7">{{item.begin_date}}~{{item.end_date}}</text>
            </view>
          </view>
          <text class="text_9" v-if="isFinish">没有更多了～</text>
      </scroll-view>

    </view>
    <tabBar :tabIndex="1"></tabBar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      isFinish: false,
      options: [
        {
          label: '待完成',
          value: 1,
        },
        {
          label: '已完成',
          value: 2,
        },
      ],
      loopData0: [],
      constants: {},
    };
  },
  async onLoad() {
    await this.loadMoreData(true)
  },
  methods: {
    handleTab(item,index){
      this.activeIndex = index
      this.isFinish = false
      this.loadMoreData(true)
    },
    async loadMoreData(reset = false){
      if(this.isFinish){
        return
      }
      if(reset){
        this.current = 1
        this.loopData0 = []
      }
      let param = {
        current: this.current,
        pageSize: this.pageSize,
        for_student: true,
        for_student_finished: this.activeIndex == 0?false:true,
        keyword: '',
      }
      let res = await this.API.HomeworkPagedList({args: param})

      if(res){
        this.loopData0 = this.loopData0.concat(res.data)
        console.log('this.loopData0.length',this.loopData0.length)
        console.log('this.total.total',res.total)
        if(this.loopData0.length == res.total){
          this.isFinish = true
        } else {
          this.current++;
          this.isFinish = false;
        }
      }
    },
    gotoWorkDetail(item){
      uni.navigateTo({
        url: '/pages/work/detail?homework_id='+ item.homework_id
      });
    }
  },
};
</script>
<style scoped lang="less">
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;

  .box_2 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding-top: 16rpx;
    .block_1 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding: 12rpx 242rpx 0 244rpx;
      .text-wrapper_6 {
        width: 264rpx;

        .tab{
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
          position: relative;
        }
        .tab-active{
          color: rgba(39, 118, 255, 1);
          font-family: PingFangSC-Medium;
          font-weight: 500;
        }
        .tab-active:before{
          content: '';
          position: absolute;
          bottom: -20%;
          left: calc(50% - 20rpx);
          width: 40rpx;
          height: 6rpx;
          border-radius: 3rpx;
          background: rgba(39, 118, 255, 1);
        }
        .text_4 {
          overflow-wrap: break-word;
          //color: rgba(39, 118, 255, 1);
          font-size: 28rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
        }
        .text_5 {
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
        }
      }
      .block_7 {
        margin: 6rpx 182rpx 0 2rpx;
        .block_2 {
          background-color: rgba(39, 118, 255, 1);
          border-radius: 4px 4px 0px 0px;
          width: 80rpx;
          height: 6rpx;
        }
      }
    }
  }
  .list_3 {
    width: 702rpx;
    height: calc(100% - 64rpx - 24rpx - 24rpx - 44px);
    align-self: center;
    margin-top: 24rpx;
    padding-bottom: 34px;
    .list-items_1 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 12px;
      margin-bottom: 24rpx;
      padding: 24rpx 24rpx 24rpx 24rpx;
      .block_3 {
        background-color: rgba(216, 216, 216, 0.3);
        border-radius: 8px;
        width: 654rpx;
        height: 320rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .box_9 {
        position: relative;
        margin-top: 12rpx;
        padding-left: 514rpx;
        .image_7 {
          width: 140rpx;
          height: 112rpx;
        }
        .text_6 {
          position: absolute;
          left: 0;
          top: 12rpx;
          width: 654rpx;
          height: 88rpx;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 32rpx;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          line-height: 44rpx;
        }
      }
      .block_5 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        width: 654rpx;
        height: 2rpx;
        margin-top: 10rpx;
      }
      .box_10 {
        //width: 584rpx;
        //margin: 24rpx 70rpx 0 0;
        align-items: center;
        margin-top: 5rpx;
        padding: 24rpx 0 0rpx 0;
        border-top: 1rpx solid #E6EBF1;
        .image-text_13 {
          //width: 112rpx;
          .thumbnail_5 {
            width: 32rpx;
            height: 32rpx;
            margin-right: 5rpx;
          }
          .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(140, 140, 140, 1);
            font-size: 24rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 32rpx;
          }
        }
        .thumbnail_14 {
          width: 2rpx;
          height: 16rpx;
          background: #E6EBF1;
        }
        .text_7 {
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 24rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 32rpx;
        }
      }
    }
    .text_9 {
      overflow-wrap: break-word;
      color: rgba(191, 191, 191, 1);
      font-size: 24rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 34rpx;
      margin: 32rpx 300rpx 0 306rpx;
    }
  }
}

</style>
